@charset "UFT-8";
// REM
@function r($px) {
    @return ($px/40) * 1rem;
}

* {
    margin: 0;
    padding: 0;
}

#bg {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: gainsboro;
    padding: 2vh 2vw;
    overflow: hidden;
    position: relative;
    #bg1 {
        width: 95vw;
        height: 95vh;
        background: transparent;
        .Htop {}
        .topl {
            height: 24vh;
            width: 46vw;
            float: left;
            background-color: lightskyblue;
            text-align: center;
            line-height: 24vh;
            font-size: r(65);
            color: darkslategray;
            #Num {
                font-size: r(80);font-weight: bold;
                color: white;
                vertical-align: bottom;
            }
        }
        .topr{
            height: 24vh;
            width: 46vw;
            float: right;
            background-color: #BFAFA0;
            font-size: r(40);
            color: darkslategrey;
            box-sizing: border-box;
            padding-top: 2vh;
            text-align: center;
            #random{
                margin-top: 4px;
                width: 100%;
                height: 16vh;
                background: transparent;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                .num{
                    color: white;
                    display: inline-block;
                    margin-left: r(5);
                    font-weight: 600;
                    width: r(46);
                    height: r(46);
                    border: 1px solid #2F4F4F;
                    border-radius: 10px;
                    background: transparent;
                    font-size: r(38);
                    text-align: center;
                    line-height: r(44);
                    box-shadow: #2F4F4F 2px 2px;
                }
            }
        }
        #gamebox {
            width: 100%;
            height: 70vh;
            background: #d6c5b4;
            margin-top: 2.1vh;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            box-sizing: border-box;
            padding: 2vh 0;
            button {
                font-size: r(60);
                font-weight: bold;
                color: black;
                margin: 0 r(10);
                display: inline-block;
                border-radius: 4px;
                border: none;
                appearance: none;
                background: ghostwhite;
                width: 20vw;
                height: 12vh;
            }
            .times {
                display: inline-block;
                font-weight: bold;
                opacity: 0.6;
                width: 20vw;
                height: 12vh;
                margin: 0 r(10);
                font-size: 10vh;
                color: black;
                text-align: center;
                line-height: 12vh;
            }
            #times1 {
                text-align: right;
                padding-right: r(4);
                box-sizing: border-box;
            }
            #times2 {
                text-align: left;
                padding-left: r(4);
                box-sizing: border-box;
            }
        }
    } //#bg1
    #cover {
        width: 100vw;
        height: 100vh;
        font-size: r(220);
        text-align: center;
        line-height: 100vh;
        position: absolute;
        top: 0;
        left: 100vw;z-index: 10;
        background: mediumseagreen;
        transition: all 0.35s;
        color:white;
        
    }
    #gameStart{
        width: 100vw;
        height: 100vh;
        background:dodgerblue;
        position: absolute;
        top: 0;
        left: 0vw;
       p{
           color:white;font-weight: bold; font-size: r(100);text-align: center;line-height: 40vh;
           width: 100vw;
           height: 40vh;
       }
          div{
           width: 100vw;
           height:60vh;
           display: flex; flex-direction: column; justify-content: space-around;align-items: center;
       
           button{
               font-size: r(48);color: dodgerblue;font-weight: bold;
               appearance: none;
               display:block;
               width:r(300);
               height:r(160);
               border: 2px solid white;border-radius:10px;
               background-color: whitesmoke;
            }
           button:last-of-type{
               margin-bottom: 20vh;
           }
       }     
            
     }
    #gameOver{
        width: 100vw;
        height: 100vh;
        background: mediumseagreen;
        position: absolute;
        top: 0;
        left: 100vw;z-index: 11;
       p{
           color:white;font-weight: bold; font-size: r(100);text-align: center;line-height: 40vh;
           width: 100vw;
           height: 40vh;
       }
       div{
           width: 100vw;
           height:60vh;
           display: flex; flex-direction: column; justify-content: space-around;align-items: center;
           button{
               font-size: r(48);color: whitesmoke;font-weight: bold;
               appearance: none;
               display:block;
               width:r(300);
               height:r(160);
               border: 2px solid white;border-radius:10px;
               background-color: lightseagreen;
            
           }
           button:last-of-type{
               margin-bottom: 20vh;
           }
       }     
            
     }
} //#bg
.clear {
    clear: both;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}